<template>
  <div>
    <!-- <div v-if="!showCom && homeworkType == 1" v-show="!showAnswer" @click.stop="showAnswer = true" class="c-fc-sorange c-flex-row c-flex-center c-pt20 c-fs22">
      <span class="c-pr10">查看打卡内容</span>
      <i class="iconfont c-lh">&#xe816;</i>
    </div> -->
    <!-- 作业内容 -->
    <div v-if="homeworkType == 2" class="c-flex-row c-pt30 c-fs22 c-ph24 c-flex-center c-mb30">
      <div class="c-flex-grow1 c-w0 c-textAlign-c">
        <div class="c-fs26 c-fw-b">{{aswerInfo.useTime}}</div>
        <div class="c-fs20 c-fc-gray c-pt12">耗时</div>
      </div>
      <div class="c-flex-grow1 c-w0 c-textAlign-c">
        <div class="c-fs26 c-fw-b">{{aswerInfo.content}}</div>
        <div class="c-fs20 c-fc-gray c-pt12">题数</div>
      </div>
      <div class="c-flex-grow1 c-w0 c-textAlign-c">
        <div class="c-fs26 c-fw-b">{{Math.floor(aswerInfo.accuracy * 100)}}%</div>
        <div class="c-fs20 c-fc-gray c-pt12">正确率</div>
      </div>
      <div class="c-flex-grow1 c-w0 c-textAlign-c">
        <div class="c-fs26 c-fw-b">{{aswerInfo.totalpoins === null ? '--':Math.floor(aswerInfo.totalpoins)}}</div>
        <div class="c-fs20 c-fc-gray c-pt12">得分</div>
      </div>
    </div>
    <div v-else-if='homeworkType == 1 && showAnswer' class="c-pt30 c-fs24 c-ph14">
      <!-- 文本回答 -->
      <!-- <clock-content-text v-if="aswerInfo.content" :homeworkType='homeworkType'  :aswerInfo='aswerInfo'></clock-content-text> -->
      <div class="c-p c-lh42 c-pl10" :id="'text' + aswerInfo.examMainId + teacher" v-if="aswerInfo.content">
        <div class="c-ww-bw c-lh42" v-for="(cItem,cIndex) in aswerInfo.content.split('\n')" :key="cIndex">{{cItem}}</div>
      </div>
      <div class="c-flex-row c-justify-end c-w100" v-if="aswerInfo.content">
        <div @click.stop="clickShowMore" v-if="showDesc" class="theme-fc c-fs20">{{showMore ? '收起':'展开'}}</div>
      </div>
      <div :class="{'c-mt20': aswerInfo.content}">
        <div class="c-flex-row c-flexw-wrap">
          <!-- 语音回答 -->
          <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in aswerInfo.audioArr" :key="index"
            class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20 c-mh10">
            <!-- <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc != item.url" src="@/assets/i/wap/course/chat_right_play.png" alt="" />
            <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc == item.url" src="@/assets/i/wap/course/chat_right_play.gif" alt="" /> -->
            <div class="box c-ww32">
              <div class="wifi-symbol">
                <div class="wifi-circle first theme-bd2"></div>
                <div class="wifi-circle second theme-bd2" :class="playAduioSrc != item.url?'':'seconAnimation'"></div>
                <div class="wifi-circle third theme-bd2" :class="playAduioSrc != item.url?'':'thirdAnimation'"></div>
              </div>
            </div>
            <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
          </div>
        </div>
        <div class="c-flex-row c-flexw-wrap">
          <!-- 视频回答 -->
          <div @click.stop="clickShowVideo(item.videoMp4, item.videoM3u8)" class="c-p c-ww166 c-hh100 c-mb20 c-mh10" v-for="(item,index) in aswerInfo.videoArr" :key="index">
            <img class="c-w100 c-h c-br20" :src="$addXossFilter(item.videoCover, 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg4.png')" alt="" />
            <div v-if="item.videoCover" class="img-play-btn c-br20">
              <i class="iconfont c-fs40 c-fc-white">&#xe869;</i>
            </div>
          </div>
        </div>
        <!-- 图片回答 -->
        <div class="c-flex-row c-flexw-wrap">
          <div class="c-ww166 c-hh166 c-mb20 c-p c-mh10" v-for="(item,index) in aswerInfo.imgArr" :key="index">
            <div v-if="clockTeaImg" @click.stop="clickPicImage(item.url)" class="c-ww166 c-translucent-balck60 c-pa c-p-t0 c-p-l0"></div>
            <img @click.stop="clickPreviewImage(item.url, aswerInfo.imgArr)" class="c-w100 c-h c-br20" :src="$addXossFilter(item.url)" alt="" />
          </div>
        </div>
        <!-- 文档回答 -->
        <div>
          <div @click.stop="clickPrevireOffice(index)" v-for="(item,index) in aswerInfo.filesArr" :key="index" class="c-pv20 c-ph20 c-mb20 c-bg-F6F7F9 c-br20">
            <div class="c-flex-row c-aligni-center">
              <div>
                <img class="c-ww64 c-hh64 c-br20" :src="$addXossFilter(officeIconImg[item.type])" alt="" />
              </div>
              <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-ml16 c-ww410">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if='homeworkType == 4 && showAnswer' class="c-pt30 c-fs24 c-ph14">
      <!-- 文本回答 -->
      <div v-for="(item,index) in aswerInfo.content" :key="index">
        <div v-if="item.type==1" class=" c-pl10 c-pb40">
          <div class="c-fs24  c-wb-ba c-mb20">
            <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
            <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}.</span>
            <span class="c-lh30  c-fs24 c-fw700" v-html="item.title"></span>
          </div>
          <div class="c-fs24 c-fc-xblack" v-if="item.value!=''||item.value.length!=0">{{item.value}}</div>
          <div class="c-fs24 c-fc-gray c-pl10" v-else>未作答</div>
        </div>
        <div v-if="item.type==2" class=" c-pb20">
          <div class="c-fs24  c-wb-ba c-mb20  c-pl10">
            <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
            <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}.</span>
            <span class="c-lh30  c-fs24 c-fw700" v-html="item.title"></span>
          </div>
          <div class="c-flex-row c-flexw-wrap c-mb20" v-if="item.value!=''||item.value.length!=0">
            <div class="c-ww166 c-hh166 c-mb20 c-p c-mh10" v-for="(items,indexs) in item.value" :key="indexs">
              <div v-if="clockTeaImg" @click.stop="clickPicImage(items.url)" class="c-ww166 c-translucent-balck60 c-pa c-p-t0 c-p-l0"></div>
              <img @click.stop="clickPreviewImage(items.url, item.value)" class="c-w100 c-h c-br20" :src="$addXossFilter(items.url)" alt="" />
            </div>
          </div>
          <div class="c-fs24 c-fc-gray  c-mb20 c-pl10" v-else>未作答</div>
        </div>
        <div v-if="item.type==4" class=" c-pb20">
          <div class="c-fs24  c-wb-ba c-mb20  c-pl10">
            <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
            <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}.</span>
            <span class="c-lh30  c-fs24 c-fw700" v-html="item.title"></span>
          </div>
          <div class="c-flex-row c-flexw-wrap" v-if="item.value!=''||item.value.length!=0">
            <!-- 语音回答 -->
            <div @click.stop="clickPlayAudio(items.url)" v-for="(items,indexs) in item.value" :key="indexs"
              class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20 c-mh10">
              <!-- <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc != item.url" src="@/assets/i/wap/course/chat_right_play.png" alt="" />
            <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc == item.url" src="@/assets/i/wap/course/chat_right_play.gif" alt="" /> -->
              <div class="box c-ww32">
                <div class="wifi-symbol">
                  <div class="wifi-circle first theme-bd2"></div>
                  <div class="wifi-circle second theme-bd2" :class="playAduioSrc != items.url?'':'seconAnimation'"></div>
                  <div class="wifi-circle third theme-bd2" :class="playAduioSrc != items.url?'':'thirdAnimation'"></div>
                </div>
              </div>
              <div class="c-fs20 theme-fc">{{changeTimeStr(items.time)}}</div>
            </div>
          </div>
          <div class="c-fs24 c-fc-gray  c-mb20 c-pl10" v-else>未作答</div>
        </div>
        <div v-if="item.type==3" class=" c-pb20">
          <div class="c-fs24  c-wb-ba c-mb20  c-pl10">
            <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
            <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}.</span>
            <span class="c-lh30  c-fs24 c-fw700" v-html="item.title"></span>
          </div>
          <div class="c-flex-row c-flexw-wrap" v-if="item.value!=''||item.value.length!=0">
            <!-- 视频回答 -->
            <div @click.stop="clickShowVideo(items.videoMp4, items.videoM3u8)" class="c-p c-ww166 c-hh100 c-mb20 c-mh10" v-for="(items,indexs) in item.value" :key="indexs">
              <img class="c-w100 c-h c-br20" :src="$addXossFilter(items.videoCover, 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg4.png')" alt="" />
              <div v-if="items.videoCover" class="img-play-btn c-br20">
                <i class="iconfont c-fs40 c-fc-white">&#xe869;</i>
              </div>
            </div>
          </div>
          <div class="c-fs24 c-fc-gray c-mb20 c-pl10" v-else>未作答</div>
        </div>
        <div v-if="item.type==5" class="c-pb40">
          <div class="c-fs24  c-wb-ba c-mb20">
            <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
            <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}.【单选题】 </span>
            <span class="c-lh30  c-fs24 c-fw700" v-html="item.title"></span>
          </div>
          <div class="c-fs34 c-wb-ba c-ph10">
            <div v-for="(items,indexs) in item.options" :key="indexs" :class="items.value==item.value?'theme-bg-10':''" class="c-ph24 c-flex-row c-pv24 c-fs24 c-br16 c-bg-sblack c-mt20 c-bg-sgray">
              <!-- <div class="c-mr20" :class="items.value==item.value?'theme-fc':''">{{optionArr[indexs]}}</div> -->
              <div class="c-wb-ba copyNot imgInlineb c-textAlign-j problemdDom" :class="items.value==item.value?'theme-fc':''" v-html="items.value"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- AI语音学员 -->
    <article class="c-mt20 c-bg-white c-br20 c-ph20 c-pt30 c-pb40" v-else-if="homeworkType == 3&&isStudent">
      <!-- <h2 class="c-pb40 c-fs30 c-fw-b">答题卡</h2> -->
      <section>
        <clock-aswer-ai :curHwId="stuHwId" :examMainId="aswerInfo.examMainId" :isSmallWidth="false" @InfoRes="InfoRes" @getInfo="getInfo" :totalNum="totalNum" :showAiResutl="true"></clock-aswer-ai>
      </section>
    </article>
    <!-- AI语音 -->
    <div v-else-if='homeworkType == 3 && aswerInfo.aiNum > 1' class="c-p c-flex-row  c-pt30 c-fs22 c-ph24 c-flex-center c-mb30">
      <div class="c-flex-grow1 c-w0 c-textAlign-c">
        <div class="c-fs28 c-fw-b">{{aswerInfo.useTime}}</div>
        <div class="c-fs20 c-fc-gray c-pt12">耗时</div>
      </div>
      <div class="c-flex-grow1 c-w0 c-textAlign-c">
        <div class="c-fs28 c-fw-b">{{aswerInfo.content}}</div>
        <div class="c-fs20 c-fc-gray c-pt12">题数</div>
      </div>
      <div class="c-flex-grow1 c-w0 c-textAlign-c">
        <div class="c-fs28 c-fw-b">{{Math.floor(aswerInfo.totalpoins)}}%</div>
        <div class="c-fs20 c-fc-gray c-pt12">正确率</div>
      </div>
    </div>
    <!-- AI语音单题 -->
    <!-- AI语音 -->
    <section v-else-if='homeworkType == 3 && aswerInfo.aiNum == 1' class="c-br20 c-mt28 c-mh24 c-bd1-mgray c-ph20 c-pv30 c-p c-mb30">
      <div class="c-pa c-p-t-1 c-p-r24 c-ww48 c-hh40 c-textAlign-c c-pt10 c-fs22 c-fc-white c-bg-xlyellow c-p c-fw-b">
        <span class="bottom-triangle c-pa"></span>
        <span class="bottom-triangle-text c-fs12 c-pa">分</span>
        {{Number(aswerInfo.totalpoins).toFixed(0)}}
      </div>
      <div class="c-fs24 c-pr60">
        <template v-if="aswerInfo.content.answer&&aswerInfo.content.answer.length > 0">
          <span :class="item.score > 60 ? 'c-fc-deepGreen':'c-fc-xlred'" v-for="(item,index) in aswerInfo.content.answer" :key="index">
            {{aswerInfo.content.content.split(' ')[index]}}
          </span>
        </template>
        <template v-else>
          <span class="c-fc-xlred">{{aswerInfo.content.content}}</span>
        </template>

      </div>
      <!-- 语音 -->
      <div class="c-pt20 c-flex-row c-aligni-center">
        <div @click.stop="clickPlayAudio(aswerInfo.content.mp3Url)" class="c-ww166 c-hh60 c-br30 theme-bg-10 c-ph24 theme-bg-10 c-flex-row c-aligni-center">
          <!-- <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc != aswerInfo.content.mp3Url" src="@/assets/i/wap/course/chat_right_play.png" alt="" />
          <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc == aswerInfo.content.mp3Url" src="@/assets/i/wap/course/chat_right_play.gif" alt="" />
          <span class="c-pl10 theme-fc c-fs20">{{aswerInfo.content.recordTime}}"</span> -->
          <div class="box c-ww32">
            <div class="wifi-symbol">
              <div class="wifi-circle first theme-bd2"></div>
              <div class="wifi-circle second theme-bd2" :class="playAduioSrc == aswerInfo.content.mp3Url?'seconAnimation':''"></div>
              <div class="wifi-circle third theme-bd2" :class="playAduioSrc == aswerInfo.content.mp3Url?'thirdAnimation':''"></div>
            </div>
          </div>
          <div class="c-fs20 theme-fc">{{aswerInfo.content.recordTime}}"</div>
        </div>
      </div>
      <div class="c-flex-row c-justify-end c-aligni-center c-pt26">
        <span class="c-ww20 c-hh20 c-bg-xgreen c-brp50"></span>
        <span class="c-fs20 c-fc-gray c-pl4 c-pr40">优秀</span>
        <span class="c-ww20 c-hh20 c-bg-lred c-brp50"></span>
        <span class="c-fs20 c-fc-gray c-pl4">待加强</span>
      </div>
    </section>

    <!-- <div v-if="!showCom && homeworkType == 1" v-show="showAnswer" @click.stop="showAnswer = false" class="c-fc-sorange c-flex-row c-flex-center c-pt20 c-fs22">
      <span class="c-pr10">收起打卡内容</span>
      <i class="iconfont c-lh c-rotate180">&#xe816;</i>
    </div> -->

    <!-- 提交时间和评论点赞按钮 -->
    <div class="c-flex-row c-aligni-center c-fs18" :class="isPl?'c-ph24 ':''">
      <span class="c-flex-grow1 c-fc-gray c-fs20" v-if="aswerInfo.showTime!=0"> {{aswerInfo.createdAt}}</span>
      <div v-if="showCom" @click.stop="clickCom(aswerIndex,-1,'','',myAswerIndex)" class="c-flex-row c-flex-center c-ww100 c-fc-xblack">
        <i class="iconfont icon-pinglun2 c-fs20"></i>
        <span class="c-pl8 c-fs20">评论</span>
      </div>
      <div v-if="showCom" @click.stop="clickZan(aswerIndex,myAswerIndex)" class="c-ml10 c-flex-row c-flex-center c-fc-xblack">
        <i class="iconfont icon-dianzanbeifen c-fs20 theme-fc" v-if="aswerInfo.hasZan == 1"></i>
        <i class="iconfont icon-dianzan c-fs20" v-else></i>
        <span class="c-pl8 c-fs20">{{aswerInfo.hasZan == 1 ? '已赞':'点赞'}}</span>
      </div>
      <div v-if="showCom&&(isTeacher==1||isTeacher==2)" @click.stop="clickCom(aswerIndex,-1,'','',myAswerIndex,1)" class="c-ml10 c-flex-row c-flex-center c-ww100 c-fc-xblack">
        <i class="iconfont icon-pinglun2 c-fs20"></i>
        <span class="c-pl8 c-fs20">点评</span>
      </div>
    </div>

    <!-- 评论区 -->
    <!-- 1回复主题 2回复他人 3老师回复主题回复他人 4学员回复老师 5；老师回复老师-->
    <div class="c-pt40 c-fs24"  :class="isPl?'c-ph24 ':''" v-if="showCom && ((aswerInfo.zanMan&&aswerInfo.zanMan.length > 0) || (aswerInfo.commentArr&&aswerInfo.commentArr.length > 0))">
      <div class="c-fc-gray" :class="{'c-mb16': aswerInfo.commentArr.length > 0}" v-if="aswerInfo.zanMan.length > 0">
        <i class="iconfont icon-dianzanbeifen c-fs20 c-mr10 c-fc-gray"></i>
        <span v-for="(zItem,zIndex) in aswerInfo.zanMan" :key="zIndex">{{zItem.nickname}}{{zIndex == aswerInfo.zanMan.length - 1 ? '':'，'}}</span>
      </div>
      <div class=" c-bg-sgray c-ph24 c-pv24 c-br20" v-if="aswerInfo.commentArr.length > 0">
        <div class="c-flex-row" :class="cIndex == aswerInfo.commentArr.length - 1 ? '':'c-bd-b1-mgray c-mb24 c-pb24'" v-for="(cItem,cIndex) in aswerInfo.commentArr" :key="cIndex">
          <img class="c-ww44 c-brp50 c-hh44" :src="$addXossFilter(cItem.headimgurl, require('../../../assets/defult_head.png'))" alt="">
          <div class="c-pl10 c-ww424">
            <div class="c-pt4">
              <span @click.stop="clickCom(aswerIndex,cIndex,'',cItem.commentId,myAswerIndex)" :class="(cItem.type == 3 || cItem.type == 5) ? 'c-fw-b':''">{{(cItem.type == 3 || cItem.type == 5) ? cItem.nickname || '老师':cItem.nickname}}</span>
              <span v-if="(cItem.type == 3 || cItem.type == 5)" class="theme-bg-gradient180 c-fc-white c-fs16 c-pv2 c-ph4 c-br6 c-ml10 c-vcAlign-texttop">老师</span>
            </div>
            <div class="c-mt20">
              <span class="c-fc-gray" v-if="(cItem.type == 4 || cItem.type == 5) && cItem.replyName"> 回复 </span>
              <span @click.stop="clickCom(aswerIndex,cIndex,'',cItem.commentId,myAswerIndex)" :class="(cItem.type == 4 || cItem.type == 5) ? 'c-fw-b' : ''">{{cItem.replyName ? (cItem.type == 4 || cItem.type == 5) ? cItem.replyName : ' 回复 ' + cItem.replyName : ''}}<span v-if="(cItem.type == 4 || cItem.type == 5)" class="theme-bg-gradient180 c-fc-white c-fs16 c-pv2 c-ph4 c-br6 c-ml10 c-mr10 c-vcAlign-texttop">老师</span>{{(cItem.type == 4 || cItem.type == 5)?':':''}}
              </span>
              <div class="c-lh38 c-wb-ba c-mt20">
                <div class="c-inlineblack c-vcAlign-top c-w100">
                  <!-- <contain-item :content='cItem.content' :aswerIndex='aswerIndex' :cIndex='cIndex'></contain-item> -->
                  <div v-if="cItem.content"  :class="(cItem.type == 3 || cItem.type == 5) ? 'c-fw-b':''" @click.stop="clickCom(aswerIndex,cIndex,$event,cItem.commentId,myAswerIndex)" class="c-inlineblack c-mb20">
                    <div v-for="(ansItem,ansIndex) in cItem.content.split('\n')" :key="ansIndex" v-html="checkScriptStr(ansItem)">
                    </div>
                  </div>
                  <div class="c-flex-row c-flexw-wrap">
                    <div v-for="(aItem,aIndex) in cItem.audioArr" :key="aIndex" @click.stop="clickPlayAudio(aItem.content)" class="c-ww166 c-hh60 c-pv12 c-ph24  c-br30 theme-bg-10 c-flex-row c-aligni-center c-mr20 c-mb20">
                      <!-- <img class="c-ww30 c-hh30 c-rotate180 c-vcAlign-middle c-inlineblack" v-if="playAduioSrc != aItem.content" src="@/assets/i/wap/course/chat_right_play.png" alt="" />
                      <img class="c-ww30 c-hh30 c-rotate180" v-else src="@/assets/i/wap/course/chat_right_play.gif" alt="" />
                      <span class="c-pl14 theme-fc c-fs20">{{aItem.time}}"</span> -->
                      <div class="box c-ww32">
                        <div class="wifi-symbol">
                          <div class="wifi-circle first theme-bd2"></div>
                          <div class="wifi-circle second theme-bd2" :class="playAduioSrc != aItem.content?'':'seconAnimation'"></div>
                          <div class="wifi-circle third theme-bd2" :class="playAduioSrc != aItem.content?'':'thirdAnimation'"></div>
                        </div>
                      </div>
                      <div class="c-fs20 theme-fc">{{changeTimeStr(aItem.time)}}</div>
                    </div>
                  </div>
                  <div class="c-w100 musicAplayer" v-for="(aItem,aIndex) in cItem.musicArr" :key="aIndex" v-if="aItem.assetStatus==1">
                    <aplayer preload="auto" :music="{
                      artist:' ',
                      title: aItem.audioName,
                      src:isiOS ? aItem.audioM3u8 : aItem.audioM4a,
                      pic:require('@/assets/i/wap/clockIn/audio_cover_d.png'),
                    }" :volume="1" repeat="repeat-one" :isAplayerShow="isAplayerShow" @play="playAplayer"/>
                  </div>
                  <span @click.stop="clickPreviewImage(cItem.imgArr[0].content,cItem.imgArr)" v-if="cItem.imgArr&&cItem.imgArr.length" class="c-fs20 theme-fc c-mr10 c-inlineblack c-mb16">点击查看图片</span>
                  <span v-if="cItem.videoArr && cItem.videoArr.length" v-for="(item,index) in cItem.videoArr" :key="index" @click.stop="clickShowVideo(item.videoMp4,item.videoM3u8)" class="c-fs20 theme-fc c-mr10 c-inlineblack c-mb16">点击查看视频</span>
                </div>
              </div>
              <div class="c-fs20 c-fc-gray">{{cItem.createdAt}}</div>
            </div>
          </div>
          <div class="iconfont c-fs28 c-hh44 c-fc-sgray" v-if="isTeacher==1||userId==cItem.encodeUserId" @click.stop="canerCommentArr(cItem.nickname,cItem.encodeUserId,cItem.examMainId,cItem.commentId)">&#xe6ec;</div>
        </div>
      </div>
    </div>
    <!-- 签到选择 -->
    <cj-popup v-model="isShowCancer" position="bottom" round>
      <div class="c-w100 c-bg-white c-br-tr20 c-br-tl20">
        <div class="c-textAlign-c c-pv30 c-fs20 c-bd-b1 c-fc-sblack">{{ isMy ? '删除我的评论' : '删除' + nickname + "的评论" }}</div>
        <div class="c-textAlign-c c-pv20 c-fs28 c-bd-b12 c-fc-red" @click.stop="canerCommentSure">删除</div>
        <div class="c-textAlign-c c-pv20 c-fs28" @click.stop="isShowCancer=false">取消</div>
      </div>
    </cj-popup>
  </div>

</template>

<script>
import { wxUtilJs, utilJs } from "@/utils/common.js";
import clockAswerAi from "@/components/templates/clockIn/clockAswerAi.vue";
import VueAPlayer from "@/plugin/vue-aplayer/vue-aplayer.vue";
const OFFICE_IMG_MAP = {
  'doc': require('@/assets/i/wap/clockIn/icon_word.png'),
  'docx': require('@/assets/i/wap/clockIn/icon_word.png'),
  'xls': require('@/assets/i/wap/clockIn/icon_excel.png'),
  'xlsx': require('@/assets/i/wap/clockIn/icon_excel.png'),
  'ppt': require('@/assets/i/wap/clockIn/icon_ppt.png'),
  'pptx': require('@/assets/i/wap/clockIn/icon_ppt.png'),
  'pdf': require('@/assets/i/wap/clockIn/icon_pdf.png'),
  'txt': require('@/assets/i/wap/clockIn/icon_txt.png'),
};
let textLineHeight = 0;
export default {
  name: "clockAswerContent",
  components: {
    clockAswerAi,
    Aplayer:VueAPlayer
  },
  props: {
    isPl: {
      type: Boolean,
      default: true
    },
    stuHwId:{
      type: String,
      default: ""
    },
    showCom: {
      type: Boolean,
      default: true
    },
    isStudent: {
      type: Boolean,
      default: false
    },
    playAduioSrc: {
      type: String,
      default: ""
    },
    homeworkType: {
      type: Number,
      default: 0
    },
    aswerIndex: {
      type: Number,
      default: -2
    },
    myAswerIndex:{
      type: Number,
      default: 0
    },
    isTeacher:{
      type: Number,
      default: 1
    },
    totalNum:{
      type: Number,
      default: 0
    },
    teacher:{
      type: String,
      default: ""
    },
    aswerInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
    showAll:{
      type: Boolean,
      default: false
    },
    clockTeaImg:{
       type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isAplayerShow:true,
      officeIconImg: OFFICE_IMG_MAP,
      showAnswer: true,
      showDesc: false,
      showMore: false,
      isShowCancer: false,
      nickname: "",
      isMy: false,
      examMainId: "",
      commentId: "",
      userId: localStorage.getItem("userId"),
      optionArr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
    };
  },

  computed: {

  },
  watch: {
    showCom(val) {
      if (val) {
        this.showDescHeight()
      }
    },
    aswerInfo(val) {
      if (val) {
        this.showDescHeight()
      }
    },
    showAll(val) {
      if (val) {
        this.showDescHeight()
      }
    }
  },
  methods: {
    playAplayer(src) {
      if (typeof src == 'string') {
        let arr = document.getElementsByTagName("video");
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].src !== src) {
            arr[i].pause();
          }
        }
      }
    },
    //时间转换成"形式
    changeTimeStr(timeStr) {
      return utilJs.timeTmpToNsTime(timeStr)
    },
    // 防止评论含有<script>标签
    checkScriptStr(ansItem) {
      return utilJs.checkScriptStr(ansItem)
    },
    canerCommentSure() {
      let data = {
        examMainId: this.examMainId,
        commentId: this.commentId
      }
      utilJs.postMethod(
        global.apiurl + "signCard/delComment",
        data,
        (res) => {
          this.isShowCancer = false
          let delAfterArr = this.aswerInfo.commentArr.filter(item => {
            return item.commentId != this.commentId;
          });
          this.aswerInfo.commentArr = delAfterArr;
        },
        (failRes) => {
        }
      );
    },
    canerCommentArr(nickname, commentUserId, examMainId, commentId) {
      this.isMy = commentUserId == this.userId ? true : false
      this.nickname = nickname
      this.examMainId = examMainId
      this.commentId = commentId
      this.isShowCancer = true
    },
    InfoRes(res, Level, fluencyScore, accuracyScore) {
      this.Info = res
      this.Info.completionLevel = Level
      this.Info.fluencyScoreLevel = fluencyScore
      this.Info.accuracyScoreLevel = accuracyScore
      console.log(this.Info, 'Info')
      this.$emit('InfoResult', this.Info)
    },
    showDescHeight() {
      this.showDesc = false;
      this.showMore = false;
      this.$nextTick(() => {
        //获取当前内容的行高，超过3行则显示更多
        let queryTextContent = this.aswerInfo.examMainId && document.querySelectorAll("#text" + this.aswerInfo.examMainId + this.teacher)[0];
        if (!queryTextContent) {
          return;
        }
        textLineHeight = window.getComputedStyle(queryTextContent).lineHeight.split("px")[0].split(".")[0];
        console.log(queryTextContent.offsetHeight, textLineHeight)
        if (queryTextContent.offsetHeight >= textLineHeight * 2) {
          queryTextContent.style.height = textLineHeight * 2 + "px";
          queryTextContent.className = "c-p c-lh42 c-text-hidden";
          this.showDesc = true;
        }
        console.log(queryTextContent)
      });
    },
    clickPrevireOffice(index) {
      let curType = this.aswerInfo.filesArr[index].type;
      let curUrl = this.aswerInfo.filesArr[index].url;
      switch (curType) {
        case 'doc':
        case 'docx':
        case 'xls':
        case 'xlsx':
        case 'ppt':
        case 'pptx':
          window.location.href = `https://view.officeapps.live.com/op/view.aspx?src=${curUrl}`;
          break;
        case 'pdf':
        case 'txt':
          window.location.href = curUrl;
          break;
        default:
           window.location.href = curUrl;
          break;
      }
    },
    clickCom(index, cIndex = -1, event, commentId, myAswerIndex, isTeacher) {
      if (event) {
        if (event.target.nodeName == 'SPAN') {
          // 获取触发事件对象的属性
            return
        }
      }
      this.$emit("clickCom", index, cIndex, commentId, myAswerIndex, isTeacher);
    },
    clickZan(index, myAswerIndex) {
      this.$emit("clickZan", index, myAswerIndex);
    },
    clickPlayAudio(audioUrl) {
      this.$emit("clickPlayAudio", audioUrl);
    },
    clickShowVideo(videoMp4, videoM3u8) {
      this.$emit("clickShowVideo", videoMp4, videoM3u8);
    },
    clickPicImage(imgUrl) {
      if (!imgUrl) {
        return;
      }
      this.$emit("clickPicImage", imgUrl);
    },
    clickPreviewImage(imgUrl, imgArrList) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgArrList) {
        let imgItemUrl = key.content || key.url;
        imgArr.push(imgItemUrl);
      }
      let imgData = {
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr
      }
      wxUtilJs.previewImage(imgData)
      // wxUtilJs.previewImage({
      //   current: imgUrl, // 当前显示图片的http链接
      //   urls: imgArr // 需要预览的图片http链接列表
      // });
    },
    clickShowMore() {
      if (this.showMore) {
        console.log(this.aswerInfo.examMainId + this.teacher)
        let textId = document.getElementById("text" + this.aswerInfo.examMainId + this.teacher);
        textId.style.height = textLineHeight * 2 + "px";
        textId.className = "c-p c-lh42 c-text-hidden";
        this.showMore = false;
      } else {
        console.log(this.aswerInfo.examMainId + this.teacher)
        let textId = document.getElementById("text" + this.aswerInfo.examMainId + this.teacher);
         console.log(textId)
        textId.style.height = "";
        textId.className = "c-p c-lh42";
        this.showMore = true;
      }
    }
  },
  mounted() {
    this.showDesc = false;
    this.showMore = false;
    console.log(this.homeworkType, this.homeworkType == 1 && !this.aswerInfo.content)
    if (this.homeworkType != 1) {
      return;
    }
    if (this.homeworkType == 1 && !this.aswerInfo.content) {
      return;
    }
    this.showDescHeight()
  },
  activated() {
    this.showDesc = false;
    this.showMore = false;
  },
  destroyed() {
    this.showDesc = false;
    this.showMore = false;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-play-btn {
    position: absolute;
    top: 50%;
    background-color: rgba(0,0,0,0.2);
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.bottom-triangle {
  top: 1rem;
  left: 0;
  width: 0;
  height: 0;
  border-width: 0.6rem;
  border-style: solid;
  border-color: #fbb449 transparent transparent transparent;
}
.bottom-triangle-text {
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
}
.teacherbg{
  background: linear-gradient(316deg,#f45300, #ff9f5a 88%);
}
.c-vcAlign-texttop{
  vertical-align: text-top;
}
.box {
  box-sizing: border-box;
  position: relative;
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}

.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
.c-hh166{height: 4.15rem;}
.musicAplayer /deep/ .aplayer1{
  margin:0 0 .5rem;
  background-color:#fff
}
.musicAplayer /deep/ .aplayer-music{
  width: 7rem;
}
.musicAplayer /deep/ .aplayer1 .aplayer-body .aplayer-info1{
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
</style>
